<template>
    <!-- 商品名称 + 价格 -->
    <div class="good-desc">
        <!-- 价格 -->
        <div class="good-price">
            <span class="now-price">¥{{nowPrice}}</span>
            <span class="price-bg">优惠价</span>
            <span class="origin-price">¥{{originPrice}}</span>
        </div>
        <!-- 商品名称 -->
        <p class="good-title van-multi-ellipsis--l2" v-text="title"></p>
        <!-- 商品服务 -->
        <div class="good-service">
            <span class="service-postage">全场包邮</span>
            <span class="service-delivery">急速发货</span>
            <span class="service-size">量身推荐尺码<van-icon name="arrow" /></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodDesc",
        props: {
            nowPrice: {type: Number, default: 99999.99},       // 商品现价
            originPrice: {type: Number, default: 99999.99},    // 商品原价
            title: {type: String, default: ''},                // 商品名称
        }
    }
</script>

<style lang="less" scoped>
    /* 商品名称 + 价格 */
    .good-desc {
        margin-top: 36px;
        /* 价格 */
        .good-price {
            height: 50px;
            display: flex;
            /*justify-content: space-evenly;*/
            align-items: center;
            /* 现价 */
            .now-price {
                display: inline-block;
                font-size: 39px;
                font-weight: bold;
                color: #FF0B0B;
            }
            /* 优惠价图标 */
            .price-bg {
                display: inline-block;
                width: 100px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                text-indent: 10px;
                font-size: 16px;
                font-weight: bold;
                color: #FCFCFC;
                background: url("/static/images/good/preferential-price-bg.png") no-repeat 0 0;
                background-size: 100px 32px;
            }
            /* 原价 */
            .origin-price {
                font-size: 39px;
                font-weight: bold;
                text-decoration: line-through;
                color: #989898;
                margin-left: 20px;
            }
        }
        /* 商品名称 */
        .good-title {
            margin-top: 22px;
            width: 668px;
            height: 96px;
            font-size: 30px;
            font-weight: bold;
            color: #3A3A3A;
            line-height: 48px;
        }
        /* 商品服务 */
        .good-service {
            margin-top: 38px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* 全场包邮 */
            .service-postage, .service-delivery, .service-size {
                height: 40px;
                font-size: 28px;
                font-weight: 500;
                color: #3A3A3A;
                &.service-postage:before {
                    display: inline-block;
                    content: "";
                    width: 37px;
                    height: 44px;
                    background: url("/static/images/good/service-icon-1.png") no-repeat 0 0;
                    background-size: contain;
                    vertical-align: middle;
                    margin-right: 10px;
                }
                &.service-delivery:before {
                    display: inline-block;
                    content: "";
                    width: 37px;
                    height: 44px;
                    background: url("/static/images/good/service-icon-2.png") no-repeat 0 0;
                    background-size: contain;
                    vertical-align: middle;
                    margin-right: 10px;
                }
                &.service-size {
                    display: flex;
                    align-items: center;
                }
                &.service-size:before {
                    display: inline-block;
                    content: "";
                    width: 37px;
                    height: 44px;
                    background: url("/static/images/good/service-icon-3.png") no-repeat 0 0;
                    background-size: contain;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
        }
    }
</style>
